window.addEventListener('load', () => {
    let bgs = document.querySelector('.bgs');
    let detail = document.querySelectorAll('.detail-bg');
    let afters = document.querySelectorAll('.afters');
    let filter = document.querySelectorAll('.filter');
    let list_detail = document.querySelectorAll('.list-detail');
    let show = document.querySelectorAll('.show-wrap')
    let show_ul = document.querySelector('.show_ul');
    let show_li = show_ul.children;
    let btm = document.querySelectorAll('#btms');
    let ps = document.querySelectorAll('#ps');
    let list = document.querySelectorAll('.show-wrap-list');
    detail[1].addEventListener('click', () => {
        bgs.style.transform = `translateX(${-4}rem)`;
        bgs.style.transitionDuration = '300ms'
        detail[1].classList.add('bgDemo');
        detail[0].classList.remove('bgDemo');
        afters[1].classList.add('afterDemo')
        afters[0].classList.remove('afterDemo')
        bgs.addEventListener('transitionend', function() {
            list_detail[1].style.display = 'block'
            list_detail[0].style.display = 'none'
            filter[0].style.display = 'none';
            filter[1].style.display = 'block';
            show[0].style.display = 'none';
            show[1].style.display = 'block';
            show_ul.children[0].style.color = '#f03d37';
            show_ul.children[1].style.color = '#666';
            list[1].style.display = 'block';
        })
    })
    detail[0].addEventListener('click', () => {
        bgs.style.transform = `translateX(${0}rem)`;
        bgs.style.transitionDuration = '300ms'
        detail[0].classList.add('bgDemo');
        detail[1].classList.remove('bgDemo');
        afters[0].classList.add('afterDemo')
        afters[1].classList.remove('afterDemo')
        bgs.addEventListener('transitionend', function() {
            list_detail[1].style.display = 'none'
            list_detail[0].style.display = 'block'
            filter[1].style.display = 'none';
            filter[0].style.display = 'block';
            show[0].style.display = 'block';
            show[1].style.display = 'none';
            btm[1].style.display = 'none';
            btm[0].style.display = 'block';
            list[1].style.display = 'none';
            ps[1].style.display = 'none'
        })
    })
    show_ul.children[1].addEventListener('click', function() {
        show_ul.children[0].style.color = '#333'
        show_ul.children[1].style.color = '#f03d37';
        btm[0].style.display = 'none'
        btm[1].style.display = 'block'
        ps[0].style.display = 'none'
        ps[1].style.display = 'block'
    })
    show_ul.children[0].addEventListener('click', function() {
        show_ul.children[0].style.color = '#f03d37'
        show_ul.children[1].style.color = '#333';
        btm[0].style.display = 'block'
        btm[1].style.display = 'none'
        ps[0].style.display = 'block'
        ps[1].style.display = 'none'
    })
    let navToplft = document.querySelector('.navToplft');
    navToplft.addEventListener('click', () => {
        window.location.href = 'fsl-MaoYanMovie-02.html';
    })
})